<template>
    <div class="app-container2 health">
      <div class="detail">
        <div class="d-box">
          <div class="d-box-top">
            <div class="d-box-left">
              <span>设备数量</span><br />
              <span>5999</span>
            </div>
            <div class="d-box-right">
              <div class="echarts_main">
                <pieCharts
                  :echartsData="peiChartsData1"
                  id="piechart1"
                  :width="'94px'"
                  :height="'94px'"
                  type="1"
                />
              </div>
            </div>
          </div>
          <div class="d-box-bottom">
            <span>正常数量：5999</span>
            <span>异常数量：5999</span>
          </div>
        </div>
        <div class="d-box">
          <div class="d-box-top">
            <div class="d-box-left">
              <span>故障次数</span><br />
              <span>5999</span>
            </div>
            <div class="d-box-right">
              <p>
                周同比：<span class="green"><i class="el-icon-top"></i>12%</span>
              </p>
              <p>
                日环比：<span class="red"><i class="el-icon-bottom"></i>12%</span>
              </p>
            </div>
          </div>
          <div class="d-box-bottom">
            <span>故障设备：5999</span>
            <span>离线设备：5999</span>
          </div>
        </div>
        <div class="d-box">
          <div class="d-box-top">
            <div class="d-box-left">
              <span>系统健康度</span><br />
              <span>90分</span>
            </div>
            <div class="d-box-right">
              <p>
                周同比：<span class="green"><i class="el-icon-top"></i>12%</span>
              </p>
              <p>
                日环比：<span class="red"><i class="el-icon-bottom"></i>12%</span>
              </p>
            </div>
          </div>
          <div class="d-box-bottom">
            <span>健康设备：5999</span>
            <span>工作中的设备：5999</span>
          </div>
        </div>
        <div class="d-box">
          <div class="d-box-top">
            <div class="d-box-left">
              <span>正常运行时长</span><br />
              <span>99h</span>
            </div>
            <div class="d-box-right"></div>
          </div>
          <div class="d-box-bottom">
            <span>年无故障时间：5999</span>
            <span>失效时间：9h</span>
          </div>
        </div>
      </div>
      <div class="con">
        <div class="input">
          <div class="search_item">
            <div class="name">设备名称：</div>
            <el-select
              class="js_common_select"
              v-model="value"
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search_item">
            <div class="name">设备编码：</div>
            <el-select
              class="js_common_select"
              v-model="value"
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search_item">
            <div class="name">设备状态：</div>
            <el-select
              class="js_common_select"
              v-model="value1"
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="search_item">
            <div class="name">设备类型：</div>
            <el-select
              class="js_common_select"
              v-model="value2"
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="btn">
          <el-button class="js_common_btn">批量反馈</el-button>
        </div>
  
        <div class="table">
          <el-table
            :data="tableData"
            class="jk_common_table001"
            height="style"
            style="width: 100%; height: 100%"
          >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column type="index" label="序号" width="55">
            </el-table-column>
            <el-table-column prop="name" label="设备名称" width="150">
            </el-table-column>
            <el-table-column prop="code" label="编码" width="180">
            </el-table-column>
            <el-table-column prop="type" label="设备类型" width="200">
            </el-table-column>
            <el-table-column prop="status" label="设备状态" width="180">
              <template slot-scope="scope">
                <div class="table_box_status">
                  <div
                    :class="['icon', getstatusClassFn(scope.row.status)]"
                  ></div>
                  <div class="name">{{ scope.row.status }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="heZb" label="健康度" width="180">
              <template slot-scope="scope">
                <div class="table_box_use">
                  <div class="use_wrap">
                    <div class="use_info">
                      <div
                        class="use_tiao zc"
                        :style="{ width: scope.row.heZb }"
                      ></div>
                    </div>
                  </div>
                  <div class="use_text">{{ scope.row.heZb }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="feedback" label="反馈"> </el-table-column>
            <el-table-column prop="operate" label="操作" width="180">
              <template>
                <el-button type="text" size="small">反馈</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_fenye">
          <el-pagination
            class="js_common_fenyeqi"
            :current-page="1"
            :page-size="10"
            :pager-count="5"
            :append-to-body="false"
            popper-class="js_common_fenyeqi_popper"
            layout="prev, pager, next,sizes, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </template>
  <script>
  import pieCharts from "./component/oldpieCharts.vue";
  export default {
    data() {
      return {
        tableData: [
          {
            name: "D21198",
            code: "1230XD2314FN49",
            type: "控制站01-板卡01",
            status: "正常",
            heZb: "40.22%",
            feedback: "设备刚刚更换",
          },
          {
            name: "D21198",
            code: "1230XD2314FN49",
            type: "控制站01-板卡01",
            status: "离线",
            heZb: "30.22%",
            feedback: "设备刚刚更换",
          },
          {
            name: "D21198",
            code: "1230XD2314FN49",
            type: "控制站01-板卡01",
            status: "异常",
            heZb: "20.22%",
            feedback: "设备刚刚更换",
          },
          {
            name: "D21198",
            code: "1230XD2314FN49",
            type: "控制站01-板卡01",
            status: "故障",
            heZb: "80.22%",
            feedback: "设备刚刚更换",
          },
        ],
        options: [
          {
            value: "SYSSER01001",
            label: "通讯服务器A",
          },
          {
            value: "SYSSER01004",
            label: "通讯服务器B",
          },
        ],
        options1: [
          {
            value: "选项1",
            label: "正常",
          },
          {
            value: "选项2",
            label: "异常",
          },
          {
            value: "选项3",
            label: "故障",
          },
          {
            value: "选项4",
            label: "离线",
          },
        ],
        options2: [
          {
            value: "选项1",
            label: "通讯服务器",
          },
          {
            value: "选项2",
            label: "历史服务器",
          },
          {
            value: "选项3",
            label: "计算服务器",
          },
          {
            value: "选项4",
            label: "控制站",
          },
        ],
        value: "",
        value1: "",
        value2: "",
        peiChartsData1: {
          value: 65,
          name: "65",
        },
      };
    },
    components: { pieCharts},
    methods: {
      getstatusClassFn(status) {
        if (status === "正常") {
          return "zc";
        } else if (status === "异常") {
          return "yc";
        } else if (status === "故障") {
          return "gz";
        }
      },
    },
  };
  </script>
  <style lang="scss">
  .health {
    position: relative;
    display: flex;
    flex-direction: column;
  
    .detail {
      display: flex;
      flex: 0 0 auto;
      justify-content: space-around;
      align-items: center;
      color: #fff;
      background: linear-gradient(to bottom, #0d2850, #134183);
      margin-bottom: 20px;
      padding: 10px;
  
      .d-box {
        width: 310px;
  
        .d-box-top {
          display: flex;
          justify-content: space-around;
          align-items: flex-start;
          border-bottom: 1px solid;
          border-image: linear-gradient(to right, #1e539a, #3cb0ee, #1e539a);
          border-image-slice: 1;
  
          .d-box-left {
            width: 120px;
  
            span {
              color: #ccc;
              font-size: 19.5px;
            }
  
            span:nth-child(1) {
              margin-bottom: 3px;
              display: inline-block;
            }
          }
  
          .d-box-right {
            height: 94px;
  
            .echarts_main {
            }
  
            p {
              margin: 0;
            }
  
            p:nth-child(1) {
              margin-bottom: 8px;
            }
  
            .green {
              color: #509c38;
              font-weight: bold;
            }
  
            .red {
              color: #cb231c;
              font-weight: bold;
            }
          }
        }
  
        .d-box-bottom {
          text-align: center;
          padding: 10px 0;
  
          span {
            color: #ccc;
            font-size: 16.5px;
          }
  
          span:nth-child(1) {
            margin-right: 10px;
            // margin-bottom: 2px
          }
        }
      }
    }
  
    .con {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      padding: 23px;
      box-sizing: border-box;
      border: 1px solid #1a2d4c;
      background: linear-gradient(to bottom, #0d1f3c, #163368);
  
      .input {
        flex: 0 0 auto;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
  
        .search_item {
          display: flex;
          justify-content: space-between;
          align-items: center;
  
          .name {
            flex: 0 0 auto;
            margin-right: 10px;
          }
        }
      }
    }
  
    .table {
      flex: 1 1 auto;
      // background: linear-gradient(to right, #12315e, #154173, #12315e);
    }
  
    .main_fenye {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 16px;
    }
  
    .table_box_status {
      display: flex;
      align-items: center;
      justify-content: center;
  
      .icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #7d7e7f;
        margin-right: 5px;
  
        &.zc {
          background-color: #52ab35;
        }
  
        &.yc {
          background-color: #e2912d;
        }
  
        &.gz {
          background-color: #bf1921;
        }
      }
    }
  
    .table_box_use {
      display: flex;
      align-items: center;
      justify-content: center;
      .use_wrap {
        flex: 0 0 auto;
        height: 30px;
        box-sizing: border-box;
        border: 1px solid #3474ba;
        display: flex;
        align-items: center;
        .use_info {
          margin: 0 6px;
          width: 80px;
          background-color: #fff;
          position: relative;
          .use_tiao {
            height: 10px;
            &.zc {
              background: linear-gradient(to right, #4471b1, #50c6e6);
            }
            &.yc {
              background: linear-gradient(to right, #d98e30, #d98e30);
            }
            &.wx {
              background: linear-gradient(to right, #b51d22, #b51d22);
            }
          }
          .use_tiao_text {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            font-size: 14px;
          }
        }
      }
      .use_text {
        flex: 0 0 auto;
        margin-left: 10px;
      }
    }
  
    .btn {
      flex: 0 0 auto;
      text-align: left;
      padding: 15px 0;
    }
  }
  </style>
  